<!-- 绩效管理 - 打包计费方式->列表 -->
<template>
<div  style="padding: 15px;">
    <vxe-toolbar
      id="toolbarId_bc13"
      :custom="{ storage: true }"
      export
      :refresh="{ query: findList }"
    >
      <template v-slot:buttons>
        <el-button @click="findList"> 查询 </el-button>
      </template>
    </vxe-toolbar>
    <vxe-table
      ref="xTable"
      border
      resizable
      stripe
      highlight-current-row
      highlight-hover-row
      height="90%"
      :sort-config="{ remote: true }"
      :export-config='{type:"csv"}'
      show-overflow
      align="center"
      :loading="loading"
      :data="tableData"
      @checkbox-all="selectAllEvent"
      @checkbox-change="selectChangeEvent"
      @sort-change="sortList"
    >
      <vxe-table-column type="seq" width="60"></vxe-table-column>
      <vxe-table-column type="checkbox" width="60"></vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="warehouseName" title="仓库" min-width="150" />
        <template v-slot:header="{ column }">
          <el-select v-model="listQuery.warehouseCode" placeholder="请输入所属仓库 " style="width:100%" clearable>
            <el-option
              v-for="item in warehouseData"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            />
          </el-select>
        </template>
      </vxe-table-column>


      <vxe-table-column>
        <vxe-table-column
          field="jobTime"
          show-header-overflow
          show-overflow
          title="作业日期"
          min-width="420"
          sortable
          :resizable="false"
        />
        <template v-slot:header>
          <el-date-picker
            v-model="jobTimeRange"
            type="daterange"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            style="width:100%"
            range-separator="至"

            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="value => changeDate(value, 'jobTime')"
          />
        </template>
      </vxe-table-column>

      <vxe-table-column>
        <vxe-table-column field="staffName" title="员工姓名" min-width="150" sortable />
        <template v-slot:header>
          <el-input v-model="listQuery.staffName" placeholder="请输入员工姓名" clearable />
        </template>
      </vxe-table-column>

      <vxe-table-column>
        <vxe-table-column field="staffPhone" title="手机号" min-width="150" sortable />
        <template v-slot:header>
          <el-input v-model="listQuery.staffPhone" placeholder="请输入手机号" clearable />
        </template>
      </vxe-table-column>

      <vxe-table-column>
        <vxe-table-column field="billingMethod" title="计费方式" min-width="140" show-header-overflow show-overflow :formatter="formatterBillingMethodType"/>
        <template v-slot:header="{ column }">
          <el-select v-model="listQuery.billingMethod" placeholder="请选择" clearable>
            <el-option
              v-for="item in billingMethodList"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            />
          </el-select>
        </template>
      </vxe-table-column>

      <vxe-table-column>
        <vxe-table-column field="billingPrice" title="计费单价" min-width="150" sortable />
        <template v-slot:header="{ column }">
          <el-input
            v-model="listQuery.billingPriceStart"
            placeholder="下限"
            clearable
            type='number'
            style="width: 45%"
          />
          -
          <el-input
            v-model="listQuery.billingPriceEnd"
            placeholder="上限"
            clearable
            type='number'
            style="width: 45%"
          />
        </template>
      </vxe-table-column>
    </vxe-table>
    <vxe-pager
      :loading="loading"
      :current-page.sync="listQuery.pageNum"
      :page-size.sync="listQuery.pageSize"
      :total="listQuery.total"
      :layouts="[
        'PrevJump',
        'PrevPage',
        'Number',
        'NextPage',
        'NextJump',
        'Sizes',
        'FullJump',
        'Total'
      ]"
      @page-change="handlePageChange"
    />
    <vxe-modal
      v-model="modelAED"
      :title="operationTitle"
      width="1100"
      height="650"
      destroy-on-close
      resize
    >
      <aedOperation
        :operation-type="operationType"
        :operation-code="operationCode"
        @operationComplete="
          handleClick()
          findList()
        "
      />
    </vxe-modal>
  </div>
</template>
<script>
import {
  packBillingMethod
} from '@/api/performanceManage/packBillingMethod'
import { getWarehouse} from '@/api/basicInfo'
export default {
  name: 'packBillingMethod',
  data() {
    return {
      loading: false,
      tableData: [],
      isDisable: true, //启用、停用按钮是否禁用
      operationType: '', //操作类型
      operationTitle: '', //操作类型标题
      operationCode: '', // 修改、详情，数据的id
      modelbindingFlag: false,
      modelAED: false,
      gmtCreatedRange: [],
      gmtModifiedRange: [],
      factoryList: [], //所属工厂
      listQuery: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      // 选中的数据
      selectData: [],
      //仓库数据
      warehouseData:[],
      //计费方式:days天, hours工时, pieces件
       billingMethodList:[
        { code: "days", name: "天" },
        { code: "hours",name: "工时" },
        { code: "pieces",name: "件" }
      ],

      jobTimeRange: '',
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
    }
  },
  created() {

    this.findList();
    this.getWarehouse()
  },
  methods: {
    // 表格列表加载loading
    tabLoading() {
      this.loading = !this.loading
    },
     // 翻译计费方式
    formatterBillingMethodType({ row, cellValue }) {
      let val = row.billingMethod;
      this.billingMethodList.forEach(e=>{
        if(row.billingMethod == e.code){
          val =  e.name;
          return;
        }
      })
      return val;
    },
    // 获取列表
    findList() {
      this.tabLoading()
      return new Promise((resolve) => {
        packBillingMethod(this.listQuery).then((res) => {
          this.tableData = res.data.records
          this.listQuery.total = res.data.total
          this.tabLoading()
          resolve()
        })
      })
    },
     //仓库查询
    getWarehouse(){
      getWarehouse().then(response => {
        this.warehouseData = response.data
        this.initFinishFlag = true;
      })
    },


    // 创建时间、修改时间
    changeDate(value, prefix) {
      if (value) {
        this.listQuery[`${prefix}Start`] = value[0] + ' 00:00:00'
        this.listQuery[`${prefix}End`] = value[1] + ' 23:59:59'
      } else {
        this.listQuery[`${prefix}Start`] = ''
        this.listQuery[`${prefix}End`] = ''
      }
    },
    // 全选与否
    selectAllEvent({ checked, records }) {
      this.selectData = records
    },
    // 勾选、取消事件
    selectChangeEvent({ checked, records }) {
      this.selectData = records
    },
    // 排序
    sortList({ column, property, order }) {
      if (order) {
        this.listQuery.sortField = property
        this.listQuery.sortType = order
      } else {
        this.listQuery.sortField = ''
      }
      this.findList()
    },
      // 时间
    changeDate(value, prefix) {
      if (value) {
        this.listQuery[`${prefix}Start`] = value[0] + ' 00:00:00'
        this.listQuery[`${prefix}End`] = value[1] + ' 23:59:59'
      } else {
        this.listQuery[`${prefix}Start`] = ''
        this.listQuery[`${prefix}End`] = ''
      }
    },
    // 分页handle
    handlePageChange({ currentPage, pageSize }) {
      this.listQuery.pageNum = currentPage
      this.listQuery.pageSize = pageSize
      this.findList()
    }
  }
}
</script>

<style lang="scss" scoped>
.vxe-table {
  ::v-deep.el-date-editor {
    width: 100%;
  }
}
</style>
